<template>
  <div style="height: 600px;">
    <LokiLogViewer 
      :namespacePodPairs="namespacePodPairs"
      lokiApiBaseUrl="http://localhost:3100"
      title="多Pod日志查看器"
      :terminalOptions="terminalOptions"
      :autoRefreshInterval="10000"
      @logs-loaded="handleLogsLoaded"
      @error="handleError"
      @live-mode-change="handleLiveModeChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { LokiLogViewer } from 'loki-log-viewer';
import 'loki-log-viewer/dist/loki-log-viewer.css';

// 定义多个命名空间/Pod组合
const namespacePodPairs = [
  { namespace: 'default', pod: 'app-pod-1', displayName: '应用服务1' },
  { namespace: 'monitoring', pod: 'app-pod-2', displayName: '监控服务' },
  { namespace: 'database', pod: 'mysql-pod', displayName: '数据库服务' }
];

// 自定义终端选项
const terminalOptions = {
  fontSize: 14,
  lineHeight: 1.3,
  scrollback: 10000,
  theme: {
    background: '#000000',
    foreground: '#ffffff'
  }
};

// 事件处理函数
const handleLogsLoaded = (logs) => {
  console.log(`加载了 ${logs.length} 条日志`);
};

const handleError = (error) => {
  console.error('日志查询出错:', error);
};

const handleLiveModeChange = (isLive) => {
  console.log('实时模式状态:', isLive);
};
</script>

<style scoped>
/* 自定义样式 */
</style>